<template>
  <div class="app-container">
    <div style="font-size: 25px;">库间调拨单</div>
    <el-divider></el-divider>
    <div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="调拨单号" prop="allocationOrder" style="width: 400px">
              <el-input v-model="allocationOrder" disabled placeholder="请输入调拨单号" maxlegth="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库仓库" prop="lssueWarehouse" style="width: 400px">
              <el-select
                v-model="form.lssueWarehouse"
                placeholder="请选择出库仓库"
                clearable
                disabled
                size="medium"
                style="width: 320px"
              >
                <el-option
                  v-for="dict in warehouseList"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库仓库" prop="warehousingId" style="width: 400px">
              <el-select
                v-model="form.warehousingId"
                placeholder="请选择入库仓库"
                clearable
                disabled
                size="medium"
                style="width: 320px"
                @change="check"
              >
                <el-option
                  v-for="dict in warehouseList"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作人" prop="creatUser" style="width: 400px">
              <el-input v-model="form.creatUser" disabled placeholder="请输入操作人" maxlegth="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="remark" style="width: 400px">
              <el-input v-model="form.remark" disabled placeholder="请输入备注" maxlegth="200"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调拨状态" style="width: 400px">
           <span style="display:inline-block;width:200px;font-weight:bold;">
             {{ allocationType }}
           </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row style="margin-bottom: 20px;">
          <el-col :span="1.5">
            <div style="font-size: 20px; margin-top: 5px">调拨商品</div>
          </el-col>
        </el-row>
        <div style="margin-top:10px;">
          <el-table :data="addGoodsList">
            <el-table-column label="商品ID" align="center" prop="goodId"/>
            <el-table-column label="商品名称" align="center" prop="goodName"/>
            <el-table-column label="仓库名称" align="center" prop="warehouseName"/>
            <el-table-column label="分类" align="center" prop="categoryName"/>
            <el-table-column label="品牌" align="center" prop="brandName"/>
            <el-table-column label="单位" align="center" prop="companyName"/>
            <el-table-column label="仓库库存" align="center" prop="stock"/>
            <el-table-column label="调拨数量" align="center" prop="goodNumber">
              <div class="item" slot-scope="scope">
                <el-input-number v-model="scope.row.goodNumber" controls-position="right"
                                 oninput="value=value.replace(/[^0-9.]/g,'')" disabled :min="1" size="mini"
                                 style="width:100px"
                />
              </div>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 50px;">
      <el-button type="primary" @click="close()" v-if="this.type == 0">返回</el-button>
    </div>
  </div>


</template>

<script>

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listWarehouse} from "@/api/erp/warehouse";
import {getAllocation,} from "@/api/erp/allocation";

let stream = require('stream')

export default {
  name: "sale",
  components: {Treeselect},
  dicts: ['erp_payment_type'],
  data() {
    return {
      //调拨状态
      type: null,
      //调拨状态显示
      allocationType: null,
      //仓库List
      warehouseList: [],
      //调拨单号
      allocationOrder: null,
      // 商品信息表格数据
      goodsList: [],
      // 添加的商品信息表格数据
      addGoodsList: [],
      //客户省市区
      selectedOptions: [],
      // 总条数
      total: 0,
      //表单参数
      form: {},
      //商品表单参数
      goodsForm: {},
      // 遮罩层
      loading: true,
    };
  },
  created() {
    //查询仓库list
    this.getWarehouse();
    const allocationId = this.$route.query.id
    //获取调拨单信息
    this.getAllocationById(allocationId);
  },

  methods: {

    getAllocationById(id) {
      getAllocation(id).then(res => {
        this.form = res.data
        this.allocationOrder = res.data.allocationOrder
        this.addGoodsList = res.data.erpAllocationGoods
        if (res.data.type == 0) {
          this.type = 0
          this.allocationType = "已调拨"
        }
        if (res.data.type == 1) {
          this.type = 1
          this.allocationType = "未确认"
        }
      })
    },

    /*查询仓库*/
    getWarehouse() {
      listWarehouse().then(response => {
        this.warehouseList = response.rows;
      });
    },
    //返回上一页商品列表页
    close() {
      this.$router.go(-1);
    },
  }
}

</script>

